import React from 'react'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import Banner from './Banner'
import Tags from '../../components/Tags'
import ArticleList from '../../components/ArticleList'
import * as tagsActionCreators from '../../store/actionCreators/tags'
import * as articleActionCreators from '../../store/actionCreators/article'


function Index(props) {
  const { tags, articles, onInit } = props
  React.useEffect(() => {
    onInit()
  }, [onInit])
  return (
    <div className="home-page">
      <Banner />
      <div className="container page">
        <div className="row">
          <div className="col-md-9">
            <div className="feed-toggle">
              <ul className="nav nav-pills outline-active">
                <li className="nav-item">
                  <Link className="nav-link active" to="/">Global Feed</Link>
                </li>
              </ul>
            </div>
            <ArticleList articles={articles}/>
          </div>
          <div className="col-md-3">
            <div className="sidebar">
              <p>Popular Tags</p>
              <div className="tag-list">
                <Tags tags={tags}/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

const mapStateToProps = state => ({
  tags: state.tags.tags,
  articles: state.articles.articles
})

const mapDispatchToProps = dispatch => ({
  onInit: function () {
    dispatch(tagsActionCreators.getTags())
    dispatch(articleActionCreators.getArticles())
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(Index)